<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
    <style>
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>


</head>
<body>
<div id="app"></div>
<div id="booksDiv">
    <ul>
        <li v-for="book in books">{{ book.name }}</li>
    </ul>
</div>
<!--<div id="hello-vue" class="demo">-->
<!--    {{ message }}-->
<!--</div>-->
<!--<div id="counter">-->

<!--    Counter: {{ counter }}-->
<!--</div>-->
<!--<div id="bind-attribute">-->
<!--  <span v-bind:title="message">-->
<!--    鼠标悬停几秒钟查看此处动态绑定的提示信息！-->
<!--  </span>-->
<!--</div>-->

<!--    <div id="event-handling">-->
<!--        <p>{{ message }}</p>-->
<!--        <button v-on:click="reverseMessage">反转 Message</button>-->
<!--    </div>-->
<!--    <div id="two-way-binding">-->
<!--        <p>{{ message }}</p>-->
<!--        <input v-model="message" />-->
<!--    </div>-->
<!--<script type="module" src="/src/main.js"></script>-->
<script src="https://unpkg.com/vue/dist/vue.min.js "></script>

<script>
    new Vue(
        {
            el: '#booksDiv',
            data: {
                books: [
                    {name: '《vue.js项目实战》'},
                    {name: '《vue.js项目实战》'}
                ]
            }
        }
    )
</script>

</body>
</html>
